<template>
  <div class="questionnaireTempStatusConfig">
    <el-form ref="form" :model="qstatusObj" label-width="120px">
      <el-form-item :label="showLabel(item, key, index)" v-for="(item, key, index) in qstatusObj">
        <el-input v-model.trim="qstatusObj[key]"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="saveStatus" type="primary" class="primary_btn fr">{{$t('public.save')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'questionnaireTempStatusConfig',
    data () {
      return {
        qstatus: [],
        qstatusObj: {
          success: '',
          invalid: '',
          noAnswer: '',
          imparity: '',
          other: '',
          qstatus6: '',
          qstatus7: '',
          qstatus8: '',
          qstatus9: '',
          qstatus10: '',
          qstatus11: '',
          qstatus12: '',
          qstatus13: '',
          qstatus14: '',
          qstatus15: '',
          qstatus16: '',
          qstatus17: '',
          qstatus18: '',
          qstatus19: '',
          qstatus20: ''
        }
      }
    },
    props: {
      tempId: {
        type: String,
        default: ''
      }
    },
    watch: {
      tempId () {
        this.getStatus()
      }
    },
    components: {},
    computed: {},
    methods: {
      getStatus () {
        for (let key in this.qstatusObj) {
          this.qstatusObj[key] = ''
        }
        this.$store.dispatch('getQuestionnaireTempStatusById', {_id: this.tempId}).then((res) => {
          if (res && res.success) {
            for (let key in res.data.qstatus) {
              this.qstatusObj[key] = res.data.qstatus[key] || ''
            }
          }
        })
      },
      saveStatus () {
        let qDataStatus = {}
        let isEmpty = true
        for (let key in this.qstatusObj) {
          if (this.qstatusObj[key]) {
            isEmpty = false
            qDataStatus[key] = this.qstatusObj[key]
          }
        }
        let data = {
          _id: this.tempId,
          success: this.qstatusObj.success,
          invalid: this.qstatusObj.invalid,
          noAnswer: this.qstatusObj.noAnswer,
          imparity: this.qstatusObj.imparity,
          other: this.qstatusObj.other,
          qstatus: qDataStatus
        }
        if (!isEmpty) {
          this.$store.dispatch('updateQuestionnaireTempStatusById', data).then((res) => {
            if (res && res.success) {
              this.$message.success(this.$t('configLazyLoad.qualityCheck.saveSuccess'))
            }
          })
        } else {
          this.$message.error(this.$t('configLazyLoad.questionnaireConfig.oneMsgAtLeast'))
        }
      },
      showLabel (item, key, index) {
        let currIndex = 0
        if (index <= 4) {
          currIndex = index + 1
          return this.$t('configLazyLoad.questionnaireConfig.systemDefault') + currIndex
        } else {
          currIndex = index - 4
          return this.$t('configLazyLoad.questionnaireConfig.extensibleState') + currIndex
        }
      }
    },
    mounted () {
      this.getStatus()
    },
    beforeMount () {
    }
  }
</script>

<style lang="stylus" scoped>
  .el-form
    overflow: hidden
    padding-top: 20px
    .el-form-item
      width: 30%
      float: left
</style>